<script setup>

import{ref,reactive,watch} from 'vue'

let allName=ref('')
let firstName=ref('')

let lastName=reactive({

  name:""
})

 //监听一个ref响应式数据
 watch(firstName,(newValue,oldValue)=>{
    console.log(`${oldValue}变为${newValue}`)
    allName.value=firstName.value+lastName.name
  })
  //监听reactive响应式数据的指定属性
  watch(()=>lastName.name,(newValue,oldValue)=>{
    console.log(`${oldValue}变为${newValue}`)
    allName.value=firstName.value+lastName.name
  })




</script>

<template>

  姓:<input type="text" v-model="firstName"><br>
  名:<input type="text" v-model="lastName.name"><br>
  全名:{{ allName }}


</template>

<style scoped>

</style>
